<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/list.css">
</head>
<body>
  <div class="menu">
    <!-- 公共头部开始 -->
    <div class="header">
        <ul>
            <li class="l1">
                首页
            </li>
            <li class="l2">
                商场
            </li>
            <li class="l3">
                我的订单
            </li>
            <li class="l4">
                关于我们
            </li>
        </ul>
    </div>
    <!-- 线 -->
    <div class="heng"></div>
    <!-- 搜索框 -->
    <div class="search">
        <img src="../images/1.png" alt="">
        <div class="list">
            <span>
                <i></i>
                目录
            </span>
            <div class="selist">
                <div class="mark">
                    <div>
                        <span class="s1">主题市场</span>
                    </div>
                    <ul>
                        <li>上衣</li>
                        <li>裙装</li>
                        <li>裤子</li>
                        <li>女鞋</li>
                        <li>美妆</li>
                        <li>包包</li>
                        <li>配饰</li>
                        <li>内衣</li>
                        <li>男友</li>
                        <li>母婴</li>
                        <li>家居</li>
                        <li>食品</li>
                    </ul>
                </div>
                <div class="hot">
                    <div>
                        <span class="s1">热门品牌</span>
                        <span class="s2">全部品牌 > </span>
                    </div>
                    <ul>
                        <li>CHANEL</li>
                        <li>SICLY西西里</li>
                        <li>DREAM TREND</li>
                        <li>夏梵尼</li>
                        <li>御泥坊</li>
                        <li>衣阁里拉</li>
                        <li>美康粉黛</li>
                        <li>URBAN REVIVO</li>
                        <li>new balance</li>
                    </ul>
                </div>
                <div class="popular">
                    <div>
                        <span class="s1">流行话题</span>
                        <span class="s2">全部话题 > </span>
                    </div>
                    <ul>
                        <li>#怎么多拿压岁钱？穿的"嫩"啊！#</li>
                        <li>#十月最强套装攻略，穿到冬天#</li>
                        <li>#小长假倒计时，明天上班穿这套！#</li>
                        <li>#手把手教你化秋日暖冬装#</li>
                        <li>#国庆七日穿搭打卡计划#</li>
                        <li>#西装+裙子=2019最火情侣档#</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="box">
            <input type="text">
            <button>
            </button>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
        </div>
        <ul>
            <li class="l1">
                消息
            </li>
            <li class="l2">
                收藏
            </li>
            <li class="l3">
                <a href="../views/cart.html">购物车</a>
            </li>
            <li class="l4">
                下载app
            </li>
            <div class="twowet">
                <img src="../images/4.jpg" alt="">
                <span>扫一扫 加我</span>
            </div>
        </ul>


        <!-- 个人信息部分 -->
        <div class="info">
            <!-- 登陆状态 -->
            <div class="on">
                <img src="../images/3.jpg" alt="">
                <span class="username">靠自己je23rl</span>
                <ul>
                    <li class="cart">
                        <a href="../views/cart.html">我的订单</a>
                    </li>
                    <li class="self">个人设置</li>
                    <li class="logout">退出</li>
                </ul>
            </div>
            <!-- 未登录状态 -->
            <div class="off active">
                <img src="https://s10.mogucdn.com/mlcdn/c45406/181016_143l3ehl4ebad6c2326gjk6d4h41g_48x48.png"
                    alt="">
                <a href="../views/login.html">您好，请登录</a>
            </div>
        </div>


    </div>
    <!-- 右侧导航栏 -->
    <div class="rigsid">
        <img src="../images/3.jpg" alt="">
        <ul>
            <li>首页</li>
            <li>优惠券</li>
            <li>钱包</li>
            <li>客户服务</li>
            <li>商家后台</li>
        </ul>
        <span id="myBtn">
            <p></p>
        </span>
    </div>
    <!-- 公共头部结束 -->
</div>










    <div class="big_list">
          <!-- 列表页部分 -->
      <div class="Box container">
        <ul class="category">
          <li class="active">全部</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
        </ul>
        <ul class="filter">
          <li class="f active">全部</li>
          <li data-filter="hot" class="f">折扣</li>
          <li data-filter="sale" class="f">热销</li>
        </ul>
        <ul class="saleType">
          <li class="s active">全部</li>
          <li class="s">5</li>
          <li class="s">6</li>
          <li class="s">7</li>
          <li class="s">8</li>
          <li class="s">9</li>
        </ul>
        <ul class="sort">
          <li class="sort2 active">默认</li>
          <li data-type="id" data-method="ASC" class="sort2">综合 升序</li>
          <li data-type="id" data-method="DESC" class="sort2">综合 降序</li>
          <li data-type="price" data-method="ASC" class="sort2">价格 升序</li>
          <li data-type="price" data-method="DESC" class="sort2">价格 降序</li>
          <li data-type="sale" data-method="ASC" class="sort2">折扣 升序</li>
          <li data-type="sale" data-method="DESC" class="sort2">折扣 降序</li>
        </ul>
        <div class="pagination">
          <span class="pageInfo">1 / 11</span>
          <button class="prev">上一页</button>
          <button class="next">下一页</button>
          <select>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
            <option value="24">24</option>
          </select>
        </div>
        <div class="searchBox">
          <input type="text">
        </div>
      </div>
    
      <ul class="Content container">
        <li>
          <div class="show">
            <img src="" alt="">
            <span class="hot active"> HOT </span>
            <span class="sale active"> SALE </span>
          </div>
          <div class="infos">
            <p class="title"> 商品介绍按时缴费的宫颈癌三缸发动机阿三哥发动机号按实际换个方式简单化股份见多识广数据大发家史蒂芬霍金阿三哥方式 </p>
            <p>
              折扣: 9
            </p>
            <p class="price">
              <del class="old"> ￥ 200.00 </del>
              <span class="current"> ￥ 100.00 </span>
            </p>
            <p>
              <button>加入购物车</button>
            </p>
          </div>
        </li>
      </ul>
      </div>




    

    <!-- 公共尾部开始 -->
    <div class="blank"></div>
    <div class="footer">
        <div class="banner">
            <!-- <img src="../images/mogu.png" alt=""> -->
            <div class="logo">
                <div>
                    <img src="https://s10.mogucdn.com/mlcdn/c45406/181112_4a8ch8fac2i12ib313hif4da35ed3_280x76.png">
                </div>
            </div>

            <!-- 新手帮助，保障权限 -->
            <div class="footer_help">
                <div>
                    <div class="footer_help_title">
                        新手帮助
                        <p></p>
                    </div>
                    <ul>
                        <li>常见问题</li>
                        <li>自助服务</li>
                        <li>联系客服</li>
                        <li>意见反馈</li>
                    </ul>
                </div>
                <div>
                    <div class="footer_help_title">
                        权益保障
                        <p></p>
                    </div>
                    <ul>
                        <li>全国包邮</li>
                        <li>七天无理由退货</li>
                        <li>退货运费补贴</li>
                        <li>限时发货</li>
                    </ul>
                </div>
                <div>
                    <div class="footer_help_title">
                        支付方式
                        <p></p>
                    </div>
                    <ul>
                        <li>支付宝支付</li>
                        <li>微信支付</li>
                        <li>白富美支付</li>
                    </ul>
                </div>
                <div>
                    <div class="footer_help_title">
                        移动客户端下载
                        <p></p>
                    </div>
                    <ul class="scan">
                        <li>蘑菇街<img src="../images/4.jpg" alt=""></li>
                        <li>美丽说<img src="../images/4.jpg" alt=""></li>
                        <li>uni引力<img src="../images/5.jpg" alt=""></li>
                    </ul>
                </div>
            </div>

            <!-- 关于我们 -->
            <div class="footer_msg">
                <ul>
                    <li>关于我们</li>
                    <li>招聘信息</li>
                    <li>联系我们</li>
                    <li>商家入驻</li>
                    <li>商家后台</li>
                    <li>规则中心</li>
                    <li>规则众议院</li>
                    <li>有害信息举报</li>
                    <li>用户隐私保护</li>
                </ul>
            </div>
            <!-- 公司版权 -->
            <div class="mgj_footer_hostname">
                <span>
                    ©2020 Mogu.com 杭州卷瓜网络有限公司
                </span>
            </div>
            <!-- 营业执照 -->
            <div class="footer_copyright">

            </div>

        </div>
    </div>
    <!-- 公共尾部结束 -->




   


      <script src="../js/jquery.min.js"></script>
    
      <script src="../js/utils.js"></script>
      <script src="../js/public.js"></script>
      <script src="../js/list.js"></script>





</body>
</html>